import VueRouter from 'vue-router'
// 路由切换:组件是注册在挂载具体路由文件内的
import About from '../pages/About.vue'
import Home from '../pages/Home.vue'
import News from '../pages/News.vue'
import Message from '../pages/Message.vue'
import Detail from '../pages/Detail.vue'

export default new VueRouter({
    // 易出错的配置变量名routers
    routes: [
        {
            path: '/about',
            component: About,
        },
        {
            name:'jia',
            path: '/home',
            component: Home,
            children: [
                {
                    // 嵌套路由路径无需/
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                           name:'xiangqin',
                            path: 'detail',
                            component: Detail,
                            //路由props的第一种写法:值为对象,该对象中的所有key-value都会以props的形式传递给Detail路由组件
                            // props:{
                            //   a:1,
                            //   b:2
                            // }

                            //路由props的第二种写法:值为布尔值,若布尔值为真就会把该路由组件收到的所有params参数,以props的形式传递给Detail组件(注意:此写法无法接收query传递的参数)
                            // props:true,

                            //路由props的第二种写法:值为函数(可以接收$route参数,也就表示可以拿到query,params两者传递的参数)
                            props($route) {
                                return {id:$route.query.id,title:$route.query.title}
                            }                  


                        }
                    ]
                }
            ]
        }
    ]
})